<template>
	<view>
		<br />
		<view @click="userInfo" class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10">
				<u-avatar :src="user.avatarUrl" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{user.name}}</view>
				<view class="u-font-14 u-tips-color">账号:helang_uView</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>


		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="我的任务"></u-cell-item>
				<u-cell-item icon="file-text-fill" title="我的课程" @click="myCourse" ></u-cell-item>
				<u-cell-item icon="server-fill" title="申请听课" @click="" ></u-cell-item>
				<u-cell-item icon="order" title="听课记录"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="arrow-leftward" @click="show = true" @cancel="show = false" title="退出登录"></u-cell-item>
			</u-cell-group>
		</view>
		<u-modal v-model="show" show-cancel-button cancel-text="取消" @confirm="loginout">
			<br />
				<u-row justify="center" gutter="16">
					退出登录?
				</u-row>
			<br />
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic: 'https://uviewui.com/common/logo.png',
				show: false
			}
		},
		onLoad() {

		},
		methods: {
			loginout() {
				this.show = false
				this.$store.commit("loginOut")
				this.$store.commit("disconnect")
				this.$u.route({
					url: "pages/login/login"
				})
			},
			userInfo() {
				this.$u.route("pages/user/userInfo")
			},
			myCourse(){
				this.$u.route("pages/user/myCourse")
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		}
	}
</script>

<style lang="scss">
	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
